<script setup>
import { ref, reactive } from 'vue';

// 原有状态管理不变
const isProcessStarted = ref(true);
const submitOrderRequired = ref([]);
const orderAuditTableData = ref([
  { id: 1, scope: '百账汇（广州）科技有限公司', auditor: '张小姐 邓颀' },
]);
const isFinanceAuditStarted = ref(false);
const isCreateProjectAfterAudit = ref(false);
const dispatchType = ref(1);
const isMarkEndByProject = ref(false);

// 新增财务审核表格数据
const financeAuditTableData = ref([
  { id: 1, scope: '百账汇（广州）科技有限公司', auditor: '张小姐 邓颀' },
]);

// 新增派单执行表格数据
const dispatchTableData = ref([
  { id: 1, scope: '百账汇（广州）科技有限公司', dispatcher: '张小姐 邓颀' },
]);

const steps = reactive([
  {
    name: '提交订单',
    desc: '可设置订单提交时需要校验的必填项',
    options: ['订单附件', '来源', '备用编号', '预收款', '默认支出'],
  },
  {
    name: '订单审核',
    desc: '可指定人员拥有订单审核权限，审核后的订单才可以进行下一步。审核后的订单任何人不可编辑。按提交人的所属部门来确定审核人。',
  },
  {
    name: '财务审核',
    desc: '开启后，可指定人员拥有收费审核权限，审核后的合同才可以进入下一步。审核后的合同任何人不可编辑。按提交人的所属部门来确定审核人。',
  },
  {
    name: '派单执行',
    desc: '审核通过后，执行中的订单的派单规则配置',
  },
  {
    name: '订单完结',
    desc: '服务办理完成后，可以标记订单完结。',
  },
]);
</script>

<template>
  <div class="process-container">
    <div class="main-content">
      <div class="left-text">
        <span>订单业务流转</span>
      </div>

      <div class="right-steps">
        <div class="start-switch">
          <span>启动流程</span>
          <el-switch 
            v-model="isProcessStarted" 
            active-color="#ff7d00" 
            inactive-text="关闭" 
            active-text="开启"
          />
        </div>

        <div class="steps-wrapper">
          <!-- 每个步骤项包含自己的线段（仅连接上下圆圈） -->
          <div 
            class="step-item" 
            v-for="(step, index) in steps" 
            :key="step.name"
          >
            <!-- 步骤圆圈 -->
            <div class="marker-circle">○</div>
            
            <!-- 步骤连接线：仅在两个圆圈之间显示，不超过圆圈 -->
            <div class="step-connector" v-if="index < steps.length - 1"></div>
            
            <!-- 步骤内容 -->
            <div class="step-content-wrap">
              <h3 class="step-name">{{ step.name }}</h3>
              <div class="step-content" :class="{ 'content-disabled': !isProcessStarted }">
                <!-- 提交订单 -->
                <div v-if="step.name === '提交订单'">
                  <p class="step-desc">{{ step.desc }}</p>
                  <el-checkbox-group v-model="submitOrderRequired" class="checkbox-group">
                    <el-checkbox 
                      v-for="item in step.options" 
                      :key="item" 
                      :label="item"
                      border
                    >{{ item }}</el-checkbox>
                  </el-checkbox-group>
                </div>

                <!-- 订单审核 -->
                <div v-else-if="step.name === '订单审核'">
                  <p class="step-desc">{{ step.desc }}</p>
                  <el-table 
                    :data="orderAuditTableData" 
                    border 
                    size="small"
                    class="audit-table"
                  >
                    <el-table-column prop="id" label="#" width="50" />
                    <el-table-column prop="scope" label="审核权限范围" />
                    <el-table-column prop="auditor" label="审核人" />
                    <el-table-column label="操作" width="80">
                      <template #default>
                        <el-button type="text" size="small">操作</el-button>
                      </template>
                    </el-table-column>
                  </el-table>
                </div>

                <!-- 财务审核 -->
                <div v-else-if="step.name === '财务审核'">
                  <p class="step-desc">{{ step.desc }}</p>
                  <el-switch 
                    v-model="isFinanceAuditStarted" 
                    active-color="#ff7d00" 
                    inactive-text="关闭" 
                    active-text="开启"
                  />
                  <!-- 财务审核表格 -->
                  <el-table 
                    :data="financeAuditTableData" 
                    border 
                    size="small"
                    class="audit-table"
                  >
                    <el-table-column prop="id" label="#" width="50" />
                    <el-table-column prop="scope" label="审核权限范围" />
                    <el-table-column prop="auditor" label="审核人" />
                    <el-table-column label="操作" width="80">
                      <template #default>
                        <el-button type="text" size="small">操作</el-button>
                      </template>
                    </el-table-column>
                  </el-table>
                </div>

                <!-- 派单执行 -->
                <div v-else-if="step.name === '派单执行'">
                  <p class="step-desc">{{ step.desc }}</p>
                  <el-checkbox 
                    v-model="isCreateProjectAfterAudit" 
                    :border="false"
                  >审核通过后，执行中的订单才能创建项目</el-checkbox>
                  
                  <!-- 派单执行表格 -->
                  <el-table 
                    :data="dispatchTableData" 
                    border 
                    size="small"
                    class="audit-table"
                  >
                    <el-table-column prop="id" label="#" width="50" />
                    <el-table-column prop="scope" label="派单权限范围" />
                    <el-table-column prop="dispatcher" label="派单人" />
                    <el-table-column label="操作" width="80">
                      <template #default>
                        <el-button type="text" size="small">操作</el-button>
                      </template>
                    </el-table-column>
                  </el-table>

                  <el-radio-group v-model="dispatchType" :border="false" class="radio-group">
                    <el-radio :label="1">提交人派单</el-radio>
                    <el-radio :label="2">指定人员派单 可指定人员派单，按客户所属部门来确定派单人。</el-radio>
                  </el-radio-group>
                </div>

                <!-- 订单完结 -->
                <div v-else-if="step.name === '订单完结'">
                  <p class="step-desc">{{ step.desc }}</p>
                  <el-checkbox 
                    v-model="isMarkEndByProject" 
                    :border="false"
                  >已创建的关联项目已完成/或终止</el-checkbox>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="less" scoped>
.process-container {
  background: #fff;
  border: 1px solid #eee;
  border-radius: 4px;
  padding: 20px;
  min-height: 600px;
}

.main-content {
  display: flex;
  gap: 20px;
}

.left-text {
  width: 100px;
  display: flex;
  align-items: flex-start;
  padding-top: 10px;
  span {
    font-size: 16px;
    font-weight: 600;
    color: #ff7d00;
  }
}

.right-steps {
  flex: 1;
  padding-left: 30px;
  padding-top: 10px;
}

.start-switch {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
  padding-bottom: 10px;
  border-bottom: 1px solid #eee;
  span {
    margin-right: 10px;
    color: #666;
  }
}

// 步骤包裹层
.steps-wrapper {
  position: relative;
}

// 步骤项：纵向排列，每个项包含圆圈+线段+内容
.step-item {
  position: relative;
  margin-bottom: 40px;
  &:last-child {
    margin-bottom: 0;
  }
}

// 步骤圆圈：绝对定位，作为线段的参照物
.marker-circle {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid #ff7d00;
  color: #ff7d00;
  font-size: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  left: -30px; // 与右侧内容保持间距
  top: 0;
  z-index: 1; // 确保圆圈在最上层，遮挡线段两端
}

// 步骤连接线：严格在两个圆圈之间，不超出
.step-connector {
  position: absolute;
  left: -20px; // 与圆圈中心对齐（圆圈left-30px + 圆圈半径10px = -20px）
  top: 20px; // 从当前圆圈底部开始（圆圈高度20px）
  bottom: -40px; // 到下一个圆圈顶部结束（步骤间距40px）
  width: 2px;
  background: #ff7d00;
  z-index: 0;
}

// 步骤内容容器：与圆圈保持间距
.step-content-wrap {
  padding-left: 10px; // 与圆圈右侧对齐
}

.step-name {
  font-size: 15px;
  font-weight: 600;
  color: #333;
  margin: 0 0 15px 0;
}

.step-content {
  color: #666;
  line-height: 1.6;
  .step-desc {
    margin: 0 0 15px 0;
  }
  &.content-disabled {
    opacity: 0.5;
    pointer-events: none;
  }
}

// 原有组件样式不变
.checkbox-group {
  display: flex;
  flex-wrap: wrap;
  gap: 15px 25px;
  /deep/ .el-checkbox {
    border: 1px solid #ddd;
    padding: 3px 12px;
    border-radius: 4px;
  }
}

.audit-table {
  width: 100%;
  margin-top: 15px;
  margin-bottom: 15px;
  /deep/ .el-table__header th {
    background-color: #f5f5f5;
    padding: 8px 0;
  }
  /deep/ .el-table__body td {
    padding: 10px 0;
  }
}

.radio-group {
  margin-top: 10px;
  /deep/ .el-radio {
    margin-right: 30px;
    margin-bottom: 10px;
  }
}
</style>